<template>
  <div :class="{'right': direction == 2}" class="box box-f1 container box-ac">
    <div @click="hideTips()" v-if="showTips" class="tips-red box-ac animated flash">最多可报{{bizAccountBill.maxMoney}}元</div>
    <input @focus="focus()" :placeholder="placeholder" :class="{'tc-999': readonly}" ref="amountInput" :readonly="readonly" @blur="formatMoney" class="box-f1" v-model="amount" type="number">
  </div>
</template>

<script>

import { mapState } from 'vuex'
import { limitMoney } from '@/assets/js/common'
import { formatMoney } from '@/assets/js/filters'

export default {
  name: 'amountInput',
  props: ['direction'],
  data () {
    return {
      amount: '',
      showTips: false,
      placeholder: ''
    }
  },
  computed: {
    ...mapState(['userNum', 'bizAccountBill']),
    readonly () {
      let state = this.bizAccountBill.state || 20
      return (+state !== 20)
    }
  },
  created () {
    // alert(this.direction)
    if (!this.bizAccountBill.expenseNum) return this.$router.replace('/')
    // 纸质发票
    if (this.bizAccountBill.iseinvoice === 0) {
      this.placeholder = '请输入纸质发票合计金额'
    }
    this.getDecAvailableBan()
  },
  watch: {
    amount () {
      if (+this.amount > +this.bizAccountBill.maxMoney) {
        this.amount = ''
        this.$refs.amountInput.blur()
        this.showTips = true
        return
      }
      // if (this.amount === '') return
      this.amount = limitMoney(this.amount)
      this.$store.commit('bizAccountBill', {
        amount: this.amount
      })
    }
  },
  methods: {
    hideTips () {
      this.$refs.amountInput.focus()
      this.showTips = false
    },
    focus () {
      this.placeholder = ''
    },
    formatMoney () {
      if (+this.amount > +this.bizAccountBill.maxMoney) {
        this.amount = this.bizAccountBill.maxMoney
      }
      if (this.amount === '') return
      this.amount = formatMoney(this.amount)
      this.$store.commit('bizAccountBill', {
        amount: this.amount
      })
    },
    getDecAvailableBan () {
      let { expenseNum, companyNum, costDeptNum } = this.bizAccountBill
      if (!costDeptNum) {
        this.$store.commit('bizAccountBill', {
          availableBan: 0,
          maxMoney: 0,
          amount: 0
        })
        this.$tools.openToast({
          msg: '请选择报销部门后重新获取额度',
          duration: 2000
        })
        return
      }
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getDecAvailableBan',
          userNum: this.userNum,
          costCenterNum: costDeptNum,
          expenseTypeNum: expenseNum,
          companyNum
        }
      }).then(res => {
        if (res.code === 200) {
          let availableBan = res.availableBan
          let maxMoney
          let amount
          // 纸质发票
          if (this.bizAccountBill.iseinvoice === 0) {
            maxMoney = availableBan
          } else {
            maxMoney = Math.min(availableBan, this.bizAccountBill.checkedInvoice.money)
          }
          if (this.bizAccountBill.amount) {
            amount = formatMoney(this.bizAccountBill.amount)
          } else {
            if (this.bizAccountBill.iseinvoice === 0) {
              amount = ''
            } else {
              amount = formatMoney(maxMoney)
            }
          }
          this.amount = amount
          this.$store.commit('bizAccountBill', {
            availableBan,
            maxMoney,
            amount
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  position: relative;
  height:.55rem;
  .tips-red{
    animation-duration: 1s;
    color:red;
    position:absolute;
    background-color:#FFF;
    line-height: .55rem;
    font-size:.4rem;
    width:100%;
    height:100%;
    z-index:3;
  }
  ::-webkit-input-placeholder {
    font-size:.42rem;
  }
  &.right{
    height:.42rem;
    ::-webkit-input-placeholder {
      font-size:.34rem;
    }
    .tips-red{
      height:.42rem;
      line-height: .42rem;
      font-size:.34rem;
    }
    input{
      text-align: right;
    }
  }
}
</style>
